<template>
  <div>
    <div id="mars3dcontent"></div>
    <div class="pointlist">
      <div class="search">
        <div>
          <span style="width: 130px">管点名称:</span>
          <el-input v-model="pipPointDefalutQuery.subsid"></el-input>
        </div>

        <div>
          <span style="width: 130px">管点编号:</span>
          <el-input v-model="pipPointDefalutQuery.expNo"></el-input>
        </div>

        <div>
          <span style="width: 130px">管点类型:</span>
          <el-input v-model="pipPointDefalutQuery.pipeTyp"></el-input>
        </div>
        <el-button @click="clearPipPoint">清空</el-button>
        <el-button type="primary" @click="seachPipPoint">查询</el-button>
      </div>
      <div class="table">
        <el-table
          :data="dangerhandleData"
          @row-dblclick="selectPipRow"
          style="width: 180%"
        >
          <el-table-column prop="pipnumber" label="管线点编号" width="100" />
          <el-table-column
            v-if="false"
            prop="gid"
            label="id"
            width="100"
          ></el-table-column>
          <el-table-column prop="piptype" label="管线类型" width="100" />
          <el-table-column prop="elevation" label="管线地面高程" />
          <el-table-column prop="unit" label="权属单位" />
          <el-table-column prop="time" label="探测时间" />
          <el-table-column prop="depth" label="井深" />
          <el-table-column prop="handle" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                操作
              </el-button>
              <el-button link type="primary" size="small" @click="deleteRow(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationContainer">
          <el-pagination
            v-show="total > 0"
            :total="total"
            :current-page="pipPointDefalutQuery.pageNum"
            :page-size="pipPointDefalutQuery.pageSize"
            @current-change="pagechange"
            @size-change="sizechange"
          />
        </div>
      </div>
    </div>
    <UpdatePipPoint
      v-if="updatepoint"
      :row="rowinfo"
      @RefreshFee="closePanl"
    ></UpdatePipPoint>
  </div>
</template>

<script setup>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"; //依赖的cesium库本身css
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { nextTick, onMounted, onUnmounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { mapOptions, layers } from "@/utils/mapOptions";
import { addLayer } from "@/utils/layer";
import { destroyMap, transform, flytoView, LayerCreate, AddGraphic } from "@/utils/Lmap";

import { getPieplePointList, getPieplePointGeojson,deletePieplePoint} from "@/api/manager/manager";

import UpdatePipPoint from "./UpdatePipPoint.vue";

let map;
let total = ref();
let pipPointDefalutQuery = reactive({
  /** 编号 */
  expNo: "",
  /** 类型 */
  pipeTyp: "",
  /** 管线名称 */
  subsid: "",
  pageNum: 1,
  pageSize: 3,
});
let dangerhandleData = ref([]);
let updatepoint = ref(false);
let rowinfo = reactive({});
let graphiclayer;

onMounted(() => {
  map = new mars3d.Map("mars3dcontent", mapOptions);
  addLayer(map, "https://www.cqkckc.com/geoserver/hhgw/wms", "hhgw:pipe_point");
  graphiclayer = LayerCreate.createGraphicLayer();
  map.addLayer(graphiclayer);
  console.log(map.getCameraView());
  map.terrainProvider = mars3d.LayerUtil.createTerrainProvider({
    url: layers.terrain.url,
  });
  map.on(mars3d.EventType.popupOpen, function (event) {
    console.log("打开了popup(全局监听)", event);
  });
});

onUnmounted(() => {
  destroyMap(map);
});

function pagechange(page) {
  pipPointDefalutQuery.pageNum = page;
  initTable();
  getPathList();
}

function sizechange() {
  console.log(pipPointDefalutQuery);
}

// 查询点
function seachPipPoint() {
  initTable();
  getPathList();
}

// 清空
function clearPipPoint() {
  pipPointDefalutQuery.expNo = "";
  pipPointDefalutQuery.pipeTyp = "";
  pipPointDefalutQuery.subsid = "";
  pipPointDefalutQuery.pageNum = 1;
  pipPointDefalutQuery.pageSize = 3;
  getPathList();
  graphiclayer.clear();
}

function initTable() {
  dangerhandleData.value = [];
}

function getPathList() {
  initTable();
  getPieplePointList(pipPointDefalutQuery).then((res) => {
    total.value = res.data.total;
    nextTick(()=>{
      for (const eachdata of res.data.records) {
      let dataformate = {};
      dataformate.pipnumber = eachdata.expNo;
      dataformate.piptype = eachdata.subsid;
      dataformate.gid = eachdata.gid;
      dataformate.elevation = eachdata.surH;
      dataformate.unit = eachdata.arrunitc;
      dataformate.time = eachdata.sdate;
      dataformate.depth = eachdata.welldeep;
      dangerhandleData.value.push(dataformate);
    }
    })

  });
}

function handleClick(row) {
  updatepoint.value = true;
  rowinfo = row;
}


function deleteRow(index){
  let selectgid = dangerhandleData.value[index].gid;

  ElMessageBox.confirm(
    '是否删除该行数据?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      dangerhandleData.value.splice(index, 1);
      deletePieplePoint([selectgid]).then(res =>{
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          getPathList();
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

function closePanl() {
  updatepoint.value = false;
  getPathList();
}

function selectPipRow(row) {
  getPieplePointGeojson({ gid: row.gid }).then((res) => {
    console.log(res);
    if (res.code == 200) {
      let coordinate = res.data.geometry.coordinates.slice(0, 2);
      let attribute = res.data.properties;
      console.log(transform(coordinate), attribute);
      let graphic = AddGraphic.addDemoGraphic1(graphiclayer, transform(coordinate));
      
      const innerHtml = `<table style="width:280px;">
                <tr><th scope="col" colspan="4"  style="text-align:center;font-size:15px;">管点详细信息</th></tr>
                <tr><td >位置：</td><td >${attribute.address}</td></tr>
                <tr><td >所属单位:</td><td >${attribute.arrunitc}</td></tr>
                <tr><td >流域:</td><td >${attribute.basin}</td></tr>
                <tr><td >编号:</td><td >${attribute.expNo}</td></tr>
                <tr><td >海拔:</td><td >${attribute.surH}</td></tr>
                <tr><td >类型:</td><td >${attribute.subsid}</td></tr>
                <tr><td >井深:</td><td >${attribute.welldeep}</td></tr>
                <tr><td >检查人:</td><td >${attribute.sperson}</td></tr>
              </table>`;
      graphic.on(mars3d.EventType.popupOpen, function (event) {
        const container = event.container; // popup对应的DOM
        const btnDetails = container.querySelector("#btnDetails");
        if (btnDetails) {
          btnDetails.addEventListener("click", (e) => {
            console.log("1111");
          });
        }
      });

      // 绑定Popup
      graphic
        .bindPopup(innerHtml, { offsetY: -30, closeOnClick: false, autoClose: false })
        .openPopup();

      let flyEye = mapOptions.scene.center;
      flyEye.lat = transform(coordinate)[1];
      flyEye.lng = transform(coordinate)[0];
      flyEye.alt = 1000;
      flytoView(map, flyEye);
    }
  });
}

getPathList();
</script>

<style>
.pointlist {
  width: 90%;
  height: 30%;
  position: fixed;
  bottom: 5px;
  display: flex;
  flex-direction: column;
}

.search {
  height: 30%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  background-color: aliceblue;
  opacity: 80%;
}

.search div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: 10%;
}

.table {
  width: 100%;
  height: 70%;
  background-color: aliceblue;
}

.paginationContainer {
  display: flex;
  padding-top: 8px;
  justify-content: right;
  border-top: 1px solid #ccc;
}
</style>
